<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation" style="background: none;z-index:10;">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">总览</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="background-colour">
			<view class="background-colour-mask"></view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view" style="height:calc(100vh - 120rpx - var(--status-bar-height));position: relative;z-index:10;">
			<view class="scroll-content">
				<view class="top-piece d-flex j-between">
					<view class="top-piece-cell">
						<image class="piece-cell-image" src="@/static/image/overview-date.png"></image>
						<view class="piece-cell-bottom" style="background: linear-gradient(321deg, #00DBBA 0%, rgba(0,219,186,0.9) 100%);">
							<view class="piece-cell-top">今天是你加入群</view>
							<view class="piece-cell-date">
								<text>第</text>
								<text class="cell-date-number">{{pageData?.joinDay}}</text>
								<text>天</text>
								<text v-if="pageData?.groupUser?.role=='Tourist'">（游客）</text>
							</view>
						</view>
					</view>
					<view class="top-piece-cell">
						<view @tap="goGroupUser" class="piece-cell-head d-flex">
							<cacheimg
								v-for="item in pageData?.groupUsers?.list"
							    class="cell-head-image"
							    :key="item.userId"
							    :saveKey="item.userId"
							    :src="item.userPhoto || '/static/head.jpg'"
							></cacheimg>
							<view class="cell-head-omit">...</view>
						</view>
						
						<view v-if="pageData?.isStartClock==1" class="piece-cell-people">
							共有{{joinClockin}}位胖友和你一起并肩打卡！
						</view>
						<view v-if="pageData?.isStartClock==0" class="piece-cell-people">
							群内共有{{totalNumber}}位胖友，暂无人开始打卡！
						</view>
						<view @tap="goGroupProgramme" class="piece-cell-bottom " style="background: #DAFFF9;">
							<view class="cell-bottom-programme d-flex a-center j-between">
								<view class="bottom-programme-title">群内方案</view>
								<view class="d-flex a-center">
									<view class="bottom-programme-number">{{pageData?.planCount}}</view>
									<view class="bottom-programme-unit">种</view>
									<i class="icon icon-more-2" style="font-size: 20rpx;color: #1DC691;padding-top: 5rpx;"></i>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="first-piece d-flex a-center">
					<image class="first-piece-image" src="@/static/image/overview-trophy.png"></image>
					<template v-if="pageData?.zdjz!=null">
						<view  class="d-flex">
							<cacheimg
								class="first-piece-head "
								:key="pageData?.zdjz?.userId"
								:saveKey="pageData?.zdjz?.userId"
								:src="pageData?.zdjz?.userPhoto || '/static/head.jpg'"
							></cacheimg>
							<view class="first-piece-info d-flex d-c">
								<view class="piece-info-userName">{{pageData?.zdjz?.userName}}</view>
								<view class="d-flex">
									<sexage
										style="margin-top:8rpx"
										:sex="pageData?.zdjz?.sex"
										:age="pageData?.zdjz?.age"
									/>
								</view>
							</view>
						</view>
						<view class="piece-info-weight">
							TA已减重多达<text class="info-weight-number">{{pageData?.zdjz?.value}}</text>kg！
						</view>
					</template>
					<template v-else>
						<view class="d-flex">
							<cacheimg
								class="first-piece-head "
								:src="'/static/head.jpg'"
							></cacheimg>
						</view>
						<view class="piece-info-weight">
							减重之星还未出现！
						</view>
					</template>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="date-piece">
					<view class="date-piece-float">
						<view v-if="checkinStatus==0" @tap="addClockin" class="date-piece-btn d-flex a-center j-center">
							<view class="piece-btn-text">加入</view>
							<i class="icon icon-more-2" style="font-size: 20rpx;color: #ffffff;"></i>
						</view>
						<view v-if="checkinStatus==1" @tap="goClockin" class="date-piece-btn d-flex a-center j-center">
							<view class="piece-btn-text">去打卡</view>
							<i class="icon icon-more-2" style="font-size: 20rpx;color: #ffffff;"></i>
						</view>
						<view v-if="checkinStatus==2" @tap="goClockin" class="date-piece-btn d-flex a-center j-center">
							<view class="piece-btn-text" >查看</view>
							<i class="icon icon-more-2" style="font-size: 20rpx;color: #ffffff;"></i>
						</view>
						
						<image class="date-piece-image" mode="widthFix" src="@/static/image/overview-calendar.png"></image>
					</view>
					
					<view class="date-piece-info d-flex a-center j-between">
						<view class="date-piece-clockin">今日已有<text class="-piece-clockin-number">{{pageData?.todayClockCount}}</text>位胖友完成了打卡</view>
						
					</view>
					<view class="date-piece-is">{{checkinText}}</view>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="star-piece">
					<view class="star-piece-content">
						<image class="star-piece-image" mode="widthFix" src="@/static/image/overview-star.png"></image>
						<scroll-view class="star-piece-scroll" scroll-x="true" style="white-space: nowrap;width: 100%;">
							<view style="width: 20rpx;display: inline-block;"></view>
							<view class="piece-scroll-item">
								<view style="bottom:0;" class="scroll-item-cell d-flex d-c a-center">
									<view class="item-cell-head d-flex a-center j-center">
										<cacheimg
											@tap="goPersonalCenter(pageData?.lxdl?.userId)"
											class="cell-head-image"
											:key="pageData?.lxdl?.userId"
											:saveKey="pageData?.lxdl?.userId"
											:src="pageData?.lxdl?.userPhoto || '/static/head.jpg'"
										></cacheimg>
										<image class="cell-head-crown" src="@/static/image/overview-crown.png"></image>
									</view>
									<view class="item-cell-name">{{pageData?.lxdl?.userName}}</view>
									<view v-if="pageData?.lxdl!=null" class="item-cell-describe">连续登录{{pageData?.lxdl?.value}}天</view>
									<view v-else class="item-cell-describe">暂无胖友上榜</view>
									<view class="item-cell-label">活跃之星</view>
								</view>
							</view>
							<view class="piece-scroll-item">
								<view style="bottom:60rpx;" class="scroll-item-cell d-flex d-c a-center">
									<view class="item-cell-head d-flex a-center j-center">
										<cacheimg
											@tap="goPersonalCenter(pageData?.ljdk?.userId)"
											class="cell-head-image"
											:key="pageData?.ljdk?.userId"
											:saveKey="pageData?.ljdk?.userId"
											:src="pageData?.ljdk?.userPhoto || '/static/head.jpg'"
										></cacheimg>
										<image class="cell-head-crown" src="@/static/image/overview-crown.png"></image>
									</view>
									<view class="item-cell-name">{{pageData?.ljdk?.userName}}</view>
									<view v-if="pageData?.ljdk!=null" class="item-cell-describe">累计打卡{{pageData?.ljdk?.value}}天</view>
									<view v-else class="item-cell-describe">暂无胖友上榜</view>
									<view class="item-cell-label">毅力之星</view>
								</view>
							</view>
							<view class="piece-scroll-item">
								<view style="bottom:0;" class="scroll-item-cell d-flex d-c a-center">
									<view class="item-cell-head d-flex a-center j-center">
										<cacheimg
											@tap="goPersonalCenter(pageData?.zdjz?.userId)"
											class="cell-head-image"
											:key="pageData?.zdjz?.userId"
											:saveKey="pageData?.zdjz?.userId"
											:src="pageData?.zdjz?.userPhoto || '/static/head.jpg'"
										></cacheimg>
										<image class="cell-head-crown" src="@/static/image/overview-crown.png"></image>
									</view>
									<view class="item-cell-name">{{pageData?.zdjz?.userName}}</view>
									<view v-if="pageData?.zdjz!=null" class="item-cell-describe">已减重{{pageData?.zdjz?.value}}kg</view>
									<view v-else class="item-cell-describe">暂无胖友上榜</view>
									<view class="item-cell-label">减重之星</view>
								</view>
							</view>
							<view class="piece-scroll-item">
								<view style="bottom:60rpx;" class="scroll-item-cell d-flex d-c a-center">
									<view class="item-cell-head d-flex a-center j-center">
										<cacheimg
											@tap="goPersonalCenter(pageData?.lxdk?.userId)"
											class="cell-head-image"
											:key="pageData?.lxdk?.userId"
											:saveKey="pageData?.lxdk?.userId"
											:src="pageData?.lxdk?.userPhoto || '/static/head.jpg'"
										></cacheimg>
										<image class="cell-head-crown" src="@/static/image/overview-crown.png"></image>
									</view>
									<view class="item-cell-name">{{pageData?.lxdk?.userName}}</view>
									<view v-if="pageData?.lxdk!=null" class="item-cell-describe">已减重{{pageData?.lxdk?.value}}kg</view>
									<view v-else class="item-cell-describe">暂无胖友上榜</view>
									<view class="item-cell-label">打卡之星</view>
								</view>
							</view>
						</scroll-view>	
					</view>
				</view>	
				<view style="height: 20rpx;"></view>
				<view class="grad-piece">
					<view class="grad-piece-content d-flex">
						<image class="grad-piece-image w-center" mode="widthFix" src="@/static/image/overview-grad.png"></image>
						<view class="grad-piece-item d-flex j-center" v-for="item in pageData?.byb">
							<view class="d-flex d-c a-center">
								<view class="item-cell-head d-flex a-center j-center">
									<cacheimg
										@tap="goPersonalCenter(item?.userId)"
										class="cell-head-image"
										:key="item?.userId"
										:saveKey="item?.userId"
										:src="item?.userPhoto || '/static/head.jpg'"
									></cacheimg>
								</view>
								<view class="item-cell-name">{{item?.userName}}</view>
								<view class="item-cell-describe">已减重{{pageData?.lxdl?.value}}kg</view>
							</view>
						</view>
						<view v-if="pageData?.byb.length==0" class="grad-piece-null d-flex a-center j-center">
							还没有胖友毕业
						</view>
					</view>
				</view>	
			</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { onLoad,onShow } from '@dcloudio/uni-app';
import { getGroupOverview,getGroupMember } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import cacheimg from "@/components/cacheimg.vue";
import sexage from "@/components/sexage.vue";
import { checkBodyData } from "@/hooks/bodyData";

const userData: any = userDataStore();
const goBack = () => {
	uni.navigateBack();
};
let groupId = "";
onLoad((options:any) => {
	groupId = options.groupId;
	if(groupId!=""){
		loadData()
	}
});
onShow(()=>{
	if(groupId!=""){
		loadData()
	}
});
const pageData = ref();
const checkinStatus = ref();//0 ：未加入打卡，1：部分未打卡，2：完成打卡
const checkinText = ref();//相应状态打卡显示说明
const loadData = () => {
	getGroupOverview({groupId:groupId,userId:userData.id}).then((res:any) => {
		console.log(res)
		if(res.success){
			pageData.value = res.data;
			
			if(pageData.value.zdjz!=null){
				pageData.value.zdjz.value = Number(pageData.value.zdjz.value)
			}
			//判断打卡状态
			if(pageData.value.groupUser.isJoinClock==0&&pageData.value.groupUser.isJoinClock2==0&&pageData.value.groupUser.isJoinClock3==0){
				checkinStatus.value = 0;
				checkinText.value = "你还没有加入打卡哦！";
			}else{
				let checkinRecord = pageData.value.groupUserHealthRecord;
				if(checkinRecord==null){
					checkinStatus.value = 1;
					checkinText.value = "你今日还有未完成的打卡哦！";
					//checkinText.value = "你今日还有早餐、午餐、晚餐、加餐、饮水、运动、体重没有打卡哦！";
				}else{
					if(
						checkinRecord.breakfast>0&&
						checkinRecord.lunch>0&&
						checkinRecord.dinner>0&&
						checkinRecord.addFood>0&&
						checkinRecord.water>0&&
						checkinRecord.sports>0&&
						checkinRecord.aimWeight>0
					){
						checkinStatus.value = 2;
						checkinText.value = "你已完成了今天全部的打卡项，太棒了！";
					}else{
						let text = "你今日还有";
						//checkinText.value = "你今日还有";
						if(pageData.value.groupUserHealthRecord.breakfast==0){
							text+= "早餐、"
						}
						if(pageData.value.groupUserHealthRecord.lunch==0){
							text += "午餐、"
						}
						if(pageData.value.groupUserHealthRecord.dinner==0){
							text += "晚餐、"
						}
						if(pageData.value.groupUserHealthRecord.addFood==0){
							text += "加餐、"
						}
						if(pageData.value.groupUserHealthRecord.water==0){
							text += "饮水、"
						}
						if(pageData.value.groupUserHealthRecord.sports==0){
							text += "运动、"
						}
						if(pageData.value.groupUserHealthRecord.aimWeight==0){
							text += "体重、"
						}
						text = text.slice(0, -1);
						text+= "没有打卡哦！"
						//checkinText.value = text;
						checkinText.value = "你今日还有未完成的打卡哦！";
						checkinStatus.value = 1;
					}
					
				}
			}
		}
	});
	getGroupUser();
}
const goClockin = () => {
	if (!checkBodyData()) {
		return;
	}
	uni.navigateTo({
		url: `/pages/clockin/clockin?groupId=${groupId}`,
	});
};
//查询加入打卡的人数
const joinClockin = ref();
const totalNumber = ref();
const getGroupUser = () => {
	getGroupMember({groupId:groupId}).then((res:any) => {
		if(res.success){
			joinClockin.value = res.data.list.filter((item:any) => item.isJoinClock == 1 || item.isJoinClock2 == 1 || item.isJoinClock3 == 1 ).length;
			//console.log(joinClockin.value)
			//joinClockin.value = 0;
			totalNumber.value = res.data.list.length;
		}
		
		//console.log(res.data.list)
	});
}
const goGroupProgramme = () => {
	uni.navigateTo({
	    url: `/pages/programme/groupProgramme?groupId=${groupId}`,
	});
};
const addClockin = () => {
    uni.showToast({
        icon: "none",
        title: "请联系群主或管理员",
        duration: 1500,
    });
};
const goPersonalCenter = (userId:number) => {
	if(userId!=null){
		uni.navigateTo({
			url: `/pages/personalCenter/personalCenter?userId=${userId}`,
		});
	}
    
};
const goGroupUser = () => {
	uni.navigateTo({
		url: `/pages/overview/groupMembers?groupID=${groupId}`,
	});
};
</script>

<style lang="scss" scoped>
@import "./overview.scss";
</style>
